<template>
  <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
	<view v-if="loadstatus == false">
    <view class="u-flex order-top ">
		<view class="u-font-40">{{info.order_code}}</view>
		<view class="u-flex u-flex-end">
			<view class="">
				<u--text type="primary" bold :text="info.order_status_txt" align="center"></u--text>
			</view>
			<!--view class="u-m-l-20" v-if="info.iscan_cancelled==false">
				<u-button :type="'error'"
				:disabled="info.iscan_cancelled==true?true:false"
				:text="$t('cancelOrder')" @click="$tools.goJump('/pagesPackageA/order/cancelorder',{order_code:info.order_code},'','')">
				</u-button>
			</view-->
		</view>
	</view>

	<view class="u-padding-20">
      
      <view class="u-font-bold u-p-t-20 u-p-b-20"><u-icon :label="$t('title_pay')" size="20" color="rgb(0, 162, 255)" name="rmb-circle-fill"></u-icon> </view>
      <view class="order-container u-padding-20">
		<view class=" u-flex u-flex-between">
		<view>
		<view class="u-m-b-10">{{$t('bookingtime')}}：{{$tools.dateFormat('YYYY-mm-dd HH:MM',info.add_time)}}</view>
		<view class="">{{$t('amount')}}： {{info.symbol}}<span class="price">{{ info.need_totalmoney }}</span></view>
		</view>
		<view>
			<u-button :type="info.pay_status==0?'error':'success'"
			:disabled="info.iscan_paypage==true?true:false"
			:text="info.pay_status_txt" @click="gopay(info)">
			</u-button>
		</view>
		</view>

		<view class="u-flex u-flex-middle u-m-t-20" v-if="info.pay_status==0&&(finishtimes-info.add_time)<timeout">
			<view class="u-p-l-10">{{$t('plstime1')}}</view>
			<count-down-time :timepoint="info.add_time" :minute="timeout*1000"></count-down-time>
			<view class="u-p-r-10">{{$t('plstime2')}}</view>
		</view>
		
      </view>

      <view class="u-font-bold u-p-t-40 u-p-b-20"><u-icon :label="'商品详单'" size="20" color="#42b983" name="bookmark-fill"></u-icon> </view>
      <view class="order-container" v-if="info.order_detailed.length" >   
        <view class="u-flex u-flex-between item" v-for="(good, index) in info.order_detailed">
			<view class="u-flex u-flex-fill">
				<view class="u-flex-y u-flex-10">
					<view class="u-font-lg u-m-b-9 ">{{ good.goods_name }}</view>
					<view class="u-font-sm u-info-disabled">{{good.property}}</view>
				</view>
				<view class="u-flex u-flex-3 u-flex-between">
					<view class="font-weight-bold">{{info.symbol}}{{ good.price }} * {{ good.num }}</view>
				</view>
			</view>
        </view>
      </view>

	  
      <view class="u-font-bold u-p-t-40 u-p-b-20"><u-icon :label="$t('title_orderlog')" size="20" color="#f49292" name="more-circle-fill"></u-icon></view>
      <view class="order-container u-padding-20">        
		<view class="u-p-b-10 u-m-b-10 b-b" v-for="(log, index) in info.log" v-if="info.log.length > 0">
			<view class="u-warning">{{$tools.dateFormat('YYYY-mm-dd HH:MM',log.add_time)}}</view>
			<u-parse :content="log.action_desc+' '+log.action_note" :selectable="true"></u-parse>
		</view>
      </view>
	
	<view v-if="virtualitems.length>0" class="u-p-b-10 u-m-b-10" v-for="(vitem, index) in virtualitems">
      <view class="u-font-bold u-p-t-40 u-p-b-20"><u-icon :label="vitem.goods_name+' （取货）'" size="20" color="#f49292" name="more-circle-fill"></u-icon></view>
      <view class="order-container u-padding-20">        
			<u-parse :content="vitem.description" :selectable="true"></u-parse>
      </view>
	</view>

	
	<view v-if="info.replay_is==true&&info.replay_status==false&&commentokstatus==false">
		<ygcComment ref="ygcComment"
					:placeholder="$t('storeReviews')"
					:root_id="goodsIds"
					:related_id="info.order_id"
					:module="'shop_goods'"
					@change="commentok"
					:showmode="'onlyinput'">
			<!--full 全部功能  onlyinput只有评论框 onlylist 只显示列表-->
		</ygcComment>
	</view>
	<view class="u-padding-20 u-flex-center text-center dddd" v-if="(info.replay_is==true&&info.replay_status==true)||commentokstatus==true">
		--此单已评论--
	</view>

	<!--u-divider :text="$t('orderdoubt')" :hairline="true"></u-divider>
	<view class="u-text-center u-warning">
			<span @click="$tools.goJump('/pagesPackageA/chat/chat',{messageId: info.order_code,roomname:'Order('+info.order_code+')'},!userInfo.token,'')">
				【{{$t('contactService')}}】
			</span>
	</view-->
 
	  
     <u-gap height="80"></u-gap>
	</view>
	</view>
    <view class="u-margin-20" v-else>
      <u-gap height="10"></u-gap>
      <u-skeleton :loading="loadstatus" :animate="true" rows="10"></u-skeleton>
    </view>
	
	
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl.js";
import {api_ordersave,api_assets_paymentaccount,api_order_view,api_order_log_add} from "@/config/api.js";
import ygcComment from "@/components/ygc-comment/ygc-comment.vue";
import { hidePageNavInWechatBrowser, isWechat } from "@/config/h5Utils";
import countDownTime from '@/pagesPackageA/components/count-down-time';
export default {
  components: {
	  ygcComment,countDownTime
  },
  data() {
    return {
		orderNo:'',
		loadstatus: false,		
		info:{
			order_detailed:[],
			log:[]
		},
		commentokmsg:'',
		commentokstatus:false,
		finishtimes:parseInt(new Date().getTime()/1000),
		timeout:30*60,
		virtualitems:[],
		goodsIds:''
    };
  },
  watch: {},
  computed: {
    ...mapState(["PrimaryColor", "extConfig", "userInfo", "siteInfo"]),
		countavs() {
			return (item) => {
				let count = 0
				item.forEach((avs,index) => {
					if (avs.ck==true){
						count++
					}
				})
				return count
			}
		}
  },
  onReady() {
    if (isWechat()) {
      this.height = "90px";
    }
    hidePageNavInWechatBrowser();
  },
  async onLoad(e) {
		uni.setNavigationBarTitle({title: this.$t('order_details')});
		this.orderNo = e.order_code;
		this.orderview(this.orderNo)
  },

  methods: {
	  handleFHClick(){
		  console.log('okkkk')
	  },
	  gopay(info){
		if (info.is_pay==false){
			this.$tools.goJump('/pagesPackageA/order/pay',{order_code:info.order_code},'','')
		}
	  },
	commentok(){
		console.log('okkkkkkkkk')
		this.commentokmsg=''
		this.commentokstatus=true
	},
    orderview(orderno) {
		this.loadstatus=true
        api_order_view({
          orderNo: orderno,
        }).then((res) => {
			console.log(res)
            this.info = res;
			let goods_ids = [];
				this.info.order_detailed.map((item) => {
					goods_ids.push(item.goods_id)
					if(this.info.is_pay==true&&item.goods_type==1){
						this.virtualitems.push({
							...item
						})
					}
				})
			this.goodsIds = goods_ids.join(',');
			
			console.log('this.virtualitems',this.virtualitems)
            this.loadstatus = false;
          }).catch((e) => {});
    },

  },
};
</script>

<style lang="scss">
/deep/ uni-page-body {
  background: #fff;
}
	page,body{
		height: 100%;
		background-color: #f5f5f5;
	}
.order-top{
	background: #ffffff;;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26rpx 40rpx;
	margin: 0px 0px;
	border-radius: 0 0 20px 20px;
	border-bottom: 1px solid #e1e1e1;
}
  .order-container {
    font-size: 14px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.05);
    z-index: 9;
	line-height: 190%;
	
		.item{
			/*border-left: solid 1px #EAECF7;
			border-right: solid 1px #EAECF7;*/
			color: #606266;
			position: relative;
			box-sizing: border-box;
			padding: 18rpx 20rpx;
			&.yuan{
				border-radius:24rpx;
			}
		}
		.item:after {
		  position: absolute;
		  /* #ifndef APP-NVUE */
		  box-sizing: border-box;
		  content: " ";
		  pointer-events: none;
		  border-bottom: 0.4rpx solid #f0f0f0;
		  /* #endif */
		  right: 0;
		  left: 0;
		  bottom: 0px;
		}
		.item:last-child {
			border-radius: 0rpx 0rpx 14rpx 14rpx;
			&:after{
				border-bottom:0px;
			}
		}
	
  }
	.base-info {
		border-radius: 0 0 20px 20px;
	}
.actiontag{
  border-radius:4px;
  border:solid #eeffff 1px;
  padding:2px 6px;
  background:#e1e1e1;
}
</style>
